<template>
  <div class="house-type-config">
    <!-- 暂未关联物业公司提示 -->
    <NoPropertyCompany 
      v-if="!hasPropertyCompanies" 
      title="暂未关联物业公司"
      description="您当前暂未关联任何物业公司，无法进行户型配置管理"
      icon="House"
      :show-contact-tip="true"
      :show-actions="true"
      :show-refresh-button="true"
      :show-contact-button="false"
      refresh-button-text="刷新页面"
      @refresh="loadPropertyCompanies"
    />

    <!-- 物业公司选择区域 -->
    <el-card v-else class="company-selection-card" shadow="never">
      <div class="company-selection-content">
        <div class="selection-header">
          <span class="card-title">选择物业公司</span>
          <el-tag v-if="selectedCompanies.length > 0" type="success" size="small">
            已选择 {{ selectedCompanies.length }} 个物业公司
          </el-tag>
        </div>
        <el-checkbox-group v-model="selectedCompanies" @change="handleCompanySelectionChange">
          <el-checkbox 
            v-for="company in propertyCompanies" 
            :key="company.id" 
            :value="company.id"
            class="company-checkbox"
          >
            {{ company.propertyCompanyName }} (ID: {{ company.propertyCompanyId }})
          </el-checkbox>
        </el-checkbox-group>
        <div class="form-tip">
          <el-icon><InfoFilled /></el-icon>
          <span>支持多选，选中的物业公司将共享相同的户型配置</span>
        </div>
      </div>
    </el-card>

    <!-- 户型配置表单区域 -->
    <el-card class="house-type-form-card" shadow="never" v-if="selectedCompanies.length > 0">
      <template #header>
        <div class="card-header">
          <span class="card-title">户型配置</span>
          <div class="header-actions">
            <el-button type="primary" @click="handleAddHouseType" :disabled="!canAddHouseType">
              <el-icon><Plus /></el-icon>
              新增户型
            </el-button>
            <el-button type="success" @click="handleSubmitHouseType" :loading="submitLoading" :disabled="!canAddHouseType">
              <el-icon><Check /></el-icon>
              {{ isEditMode ? '更新户型' : '保存户型' }}
            </el-button>
          </div>
        </div>
      </template>

      <!-- 户型配置表单 -->
      <el-form
        ref="houseTypeFormRef"
        :model="houseTypeForm"
        :rules="houseTypeFormRules"
        label-width="100px"
        class="house-type-form compact-form"
      >
        <!-- 基本信息 -->
        <el-divider content-position="left">基本信息</el-divider>
        <el-row :gutter="16">
          <el-col :span="8">
            <el-form-item label="户型名称" prop="houseTypeName" required>
              <el-input
                v-model="houseTypeForm.houseTypeName"
                placeholder="请输入户型名称，如：三室两厅一卫"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="建筑面积" prop="totalArea" required>
              <el-input-number
                v-model="houseTypeForm.totalArea"
                :min="0"
                :max="1000"
                :precision="2"
                :step="0.1"
                placeholder="请输入建筑面积"
                style="width: 100%"
              />
              <span class="unit-text">平方米</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="套内面积">
              <el-input-number
                v-model="houseTypeForm.usableArea"
                :min="0"
                :max="1000"
                :precision="2"
                :step="0.1"
                placeholder="请输入套内面积"
                style="width: 100%"
              />
              <span class="unit-text">平方米</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="16">
          <el-col :span="8">
            <el-form-item label="公摊面积">
              <el-input-number
                v-model="houseTypeForm.publicArea"
                :min="0"
                :max="200"
                :precision="2"
                :step="0.1"
                placeholder="请输入公摊面积"
                style="width: 100%"
              />
              <span class="unit-text">平方米</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="整体朝向">
              <el-select
                v-model="houseTypeForm.orientation"
                placeholder="请选择朝向"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="option in orientationOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="适用人群">
              <el-select
                v-model="houseTypeForm.suitableCrowd"
                placeholder="请选择适用人群"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="option in suitableCrowdOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 户型图上传 -->
        <el-divider content-position="left">户型图上传</el-divider>
        <el-row :gutter="16">
          <el-col :span="24">
                        <el-form-item label="户型图">
              <ImageUpload
                v-model="floorPlanFiles"
                :limit="5"
                :max-size="10"
                :allowed-types="['jpg', 'jpeg', 'png', 'gif']"
                tip="请上传户型图，最多5张，支持JPG、PNG、GIF格式，单张不超过10MB"
                :show-info="true"
                tip-text="点击图片可预览大图"
                @on-change="handleFloorPlanChange"
                @on-remove="handleFloorPlanRemove"
                @on-success="handleFloorPlanSuccess"
                @on-error="handleFloorPlanError"
              />
              <div class="upload-tip">
                <el-icon><InfoFilled /></el-icon>
                <span>支持上传户型图、平面图、装修示意图等，建议尺寸不小于800x600像素</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 房间数量明细 -->
        <el-divider content-position="left">房间数量明细</el-divider>
        <el-row :gutter="16">
          <el-col :span="4">
            <el-form-item label="卧室总数">
              <el-input-number
                v-model="houseTypeForm.bedroomCount"
                :min="0"
                :max="10"
                placeholder="卧室总数"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="主卧数量">
              <el-input-number
                v-model="houseTypeForm.masterBedroomCount"
                :min="0"
                :max="5"
                placeholder="主卧数量"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="次卧数量">
              <el-input-number
                v-model="houseTypeForm.secondaryBedroomCount"
                :min="0"
                :max="5"
                placeholder="次卧数量"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="儿童房">
              <el-input-number
                v-model="houseTypeForm.childrenRoomCount"
                :min="0"
                :max="3"
                placeholder="儿童房数量"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="客厅数量">
              <el-input-number
                v-model="houseTypeForm.livingRoomCount"
                :min="0"
                :max="3"
                placeholder="客厅数量"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="餐厅数量">
              <el-input-number
                v-model="houseTypeForm.diningRoomCount"
                :min="0"
                :max="2"
                placeholder="餐厅数量"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="16">
          <el-col :span="4">
            <el-form-item label="厨房数量">
              <el-input-number
                v-model="houseTypeForm.kitchenCount"
                :min="0"
                :max="2"
                placeholder="厨房数量"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="卫生间总数">
              <el-input-number
                v-model="houseTypeForm.bathroomCount"
                :min="0"
                :max="5"
                placeholder="卫生间总数"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="主卫数量">
              <el-input-number
                v-model="houseTypeForm.masterBathroomCount"
                :min="0"
                :max="3"
                placeholder="主卫数量"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="公卫数量">
              <el-input-number
                v-model="houseTypeForm.publicBathroomCount"
                :min="0"
                :max="3"
                placeholder="公卫数量"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="客卫数量">
              <el-input-number
                v-model="houseTypeForm.guestBathroomCount"
                :min="0"
                :max="2"
                placeholder="客卫数量"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="书房数量">
              <el-input-number
                v-model="houseTypeForm.studyRoomCount"
                :min="0"
                :max="3"
                placeholder="书房数量"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="16">
          <el-col :span="4">
            <el-form-item label="储物间">
              <el-input-number
                v-model="houseTypeForm.storageRoomCount"
                :min="0"
                :max="3"
                placeholder="储物间数量"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="衣帽间">
              <el-input-number
                v-model="houseTypeForm.cloakroomCount"
                :min="0"
                :max="3"
                placeholder="衣帽间数量"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="入户花园">
              <el-input-number
                v-model="houseTypeForm.entranceGardenCount"
                :min="0"
                :max="2"
                placeholder="入户花园数量"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="阳台数量">
              <el-input-number
                v-model="houseTypeForm.balconyCount"
                :min="0"
                :max="5"
                placeholder="阳台数量"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="飘窗数量">
              <el-input-number
                v-model="houseTypeForm.bayWindowCount"
                :min="0"
                :max="5"
                placeholder="飘窗数量"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="楼层位置">
              <el-select
                v-model="houseTypeForm.floorPosition"
                placeholder="请选择楼层位置"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="option in floorPositionOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 户型朝向 -->
        <el-divider content-position="left">户型朝向</el-divider>
        <el-row :gutter="16">
          <el-col :span="8">
            <el-form-item label="主卧朝向">
              <el-select
                v-model="houseTypeForm.masterBedroomOrientation"
                placeholder="请选择主卧朝向"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="option in orientationOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客厅朝向">
              <el-select
                v-model="houseTypeForm.livingRoomOrientation"
                placeholder="请选择客厅朝向"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="option in orientationOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="层高">
              <el-input-number
                v-model="houseTypeForm.floorHeight"
                :min="2.5"
                :max="6"
                :precision="2"
                :step="0.1"
                placeholder="层高"
                style="width: 100%"
              />
              <span class="unit-text">米</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="是否有花园">
              <el-switch
                v-model="houseTypeForm.hasGarden"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否有露台">
              <el-switch
                v-model="houseTypeForm.hasTerrace"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否有阁楼">
              <el-switch
                v-model="houseTypeForm.hasAttic"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 空间形态 -->
        <el-divider content-position="left">空间形态</el-divider>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="是否方正">
              <el-switch
                v-model="houseTypeForm.isSquare"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否有异形空间">
              <el-switch
                v-model="houseTypeForm.hasIrregularSpace"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否南北通透">
              <el-switch
                v-model="houseTypeForm.isTransparent"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否全明户型">
              <el-switch
                v-model="houseTypeForm.isAllBright"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="是否动静分区">
              <el-switch
                v-model="houseTypeForm.hasDynamicStaticSeparation"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否干湿分区">
              <el-switch
                v-model="houseTypeForm.hasWetDrySeparation"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="阳台数量">
              <el-input-number
                v-model="houseTypeForm.balconyCount"
                :min="0"
                :max="5"
                placeholder="阳台数量"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="阳台类型">
              <el-select
                v-model="houseTypeForm.balconyType"
                placeholder="请选择阳台类型"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="option in balconyTypeOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 特殊功能区 -->
        <el-divider content-position="left">特殊功能区</el-divider>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="飘窗数量">
              <el-input-number
                v-model="houseTypeForm.bayWindowCount"
                :min="0"
                :max="5"
                placeholder="飘窗数量"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="飘窗类型">
              <el-select
                v-model="houseTypeForm.bayWindowType"
                placeholder="请选择飘窗类型"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="option in bayWindowTypeOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="厨房带生活阳台">
              <el-switch
                v-model="houseTypeForm.kitchenHasBalcony"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="卫生间带浴缸">
              <el-switch
                v-model="houseTypeForm.bathroomHasBathtub"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="卫生间干湿分离">
              <el-switch
                v-model="houseTypeForm.bathroomHasSeparation"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="卫生间有窗户">
              <el-switch
                v-model="houseTypeForm.bathroomHasWindow"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否有loft">
              <el-switch
                v-model="houseTypeForm.hasLoft"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否有复式">
              <el-switch
                v-model="houseTypeForm.hasDuplex"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 改造潜力 -->
        <el-divider content-position="left">改造潜力</el-divider>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="是否可改户型">
              <el-switch
                v-model="houseTypeForm.canModify"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否有赠送面积">
              <el-switch
                v-model="houseTypeForm.hasGiftArea"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="适用人群">
              <el-select
                v-model="houseTypeForm.suitableCrowd"
                placeholder="请选择适用人群"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="option in suitableCrowdOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="户型优势标签">
              <el-select
                v-model="houseTypeForm.advantageTags"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择或输入户型优势标签"
                style="width: 100%"
              >
                <el-option
                  v-for="tag in commonAdvantageTags"
                  :key="tag"
                  :label="tag"
                  :value="tag"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="赠送面积描述">
              <el-input
                v-model="houseTypeForm.giftAreaDesc"
                type="textarea"
                :rows="3"
                placeholder="请描述赠送面积的具体情况，如：设备平台、阳台半赠送等"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注说明">
              <el-input
                v-model="houseTypeForm.remark"
                type="textarea"
                :rows="3"
                placeholder="请输入其他备注说明，如：阳台可封窗、厨房带燃气管道等"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 表单操作按钮 -->
        <el-form-item>
          <el-button @click="handleResetHouseTypeForm">
            <el-icon><Refresh /></el-icon>
            重置表单
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 户型列表展示 -->
    <div v-if="selectedCompanies.length > 0" class="list-section">
      <!-- 多公司户型显示 -->
      <div v-if="selectedCompanies.length > 1" class="multi-company-section">
        <div 
          v-for="companyId in selectedCompanies" 
          :key="companyId"
          class="company-house-section"
        >
          <div class="company-header">
            <h4>{{ getCompanyName(companyId) }}</h4>
            <el-tag type="info" size="small">物业公司</el-tag>
          </div>
          <HouseTypeTable 
            :data="getCompanyHouseTypes(companyId)" 
            :loading="listLoading"
            @edit="(row) => handleEditHouseType(row, companyId)"
            @delete="(row) => handleDeleteHouseType(row, companyId)"
          />
        </div>
      </div>
      <!-- 单公司户型显示 -->
      <div v-else class="single-company-section">
        <HouseTypeTable 
          :data="houseTypeList" 
          :loading="listLoading"
          @edit="handleEditHouseType"
          @delete="handleDeleteHouseType"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { InfoFilled, Check, Refresh, Plus } from '@element-plus/icons-vue'
import { houseTypeApi } from '@/api/region/houseType'
import type { HouseType, HouseTypeCreateParams } from '@/views/region/types/houseType'
import NoPropertyCompany from '@/components/NoPropertyCompany/index.vue'
import HouseTypeTable from '@/components/HouseTypeTable/index.vue'
import ImageUpload from '@/components/ImageUpload.vue'
import type { ImageInfo } from '@/components/ImageUpload.vue'

// 响应式数据
const propertyCompanies = ref<any[]>([])
const propertyCompaniesLoading = ref(false)
const listLoading = ref(false)
const submitLoading = ref(false)

// 物业公司选择表单
const companySelectionForm = reactive({
  selectedCompanies: [] as number[]
})

// 选中的物业公司
const selectedCompanies = ref<number[]>([])

// 检查是否有物业公司
const hasPropertyCompanies = computed(() => {
  return propertyCompanies.value.length > 0
})

// 户型表单
const houseTypeFormRef = ref<FormInstance>()
const houseTypeForm = reactive<HouseTypeCreateParams & { id?: number }>({
  propertyCompanyIds: [] as number[],
  houseTypeName: '',
  totalArea: 0,
  usableArea: undefined,
  publicArea: undefined,
  bedroomCount: 0,
  masterBedroomCount: 0,
  secondaryBedroomCount: 0,
  childrenRoomCount: 0,
  livingRoomCount: 1,
  diningRoomCount: 0,
  kitchenCount: 1,
  bathroomCount: 1,
  masterBathroomCount: 0,
  publicBathroomCount: 1,
  guestBathroomCount: 0,
  studyRoomCount: 0,
  storageRoomCount: 0,
  cloakroomCount: 0,
  entranceGardenCount: 0,
  orientation: undefined,
  masterBedroomOrientation: undefined,
  livingRoomOrientation: undefined,
  floorPosition: undefined,
  hasGarden: false,
  hasTerrace: false,
  hasAttic: false,
  isSquare: true,
  hasIrregularSpace: false,
  isTransparent: false,
  isAllBright: false,
  hasDynamicStaticSeparation: false,
  hasWetDrySeparation: false,
  balconyCount: 0,
  balconyType: undefined,
  balconyStyle: undefined,
  bayWindowCount: 0,
  bayWindowType: undefined,
  kitchenHasBalcony: false,
  bathroomHasBathtub: false,
  bathroomHasSeparation: false,
  bathroomHasWindow: true,
  floorHeight: undefined,
  netHeight: undefined,
  hasLoft: false,
  hasDuplex: false,
  canModify: false,
  hasGiftArea: false,
  giftAreaDesc: '',
  floorPlanType: undefined,
  floorPlanStatus: undefined,
  floorPlanUrl: '',
  advantageTags: [],
  suitableCrowd: undefined,
  remark: '',
  status: 1
})

// 户型图文件列表
const floorPlanFiles = ref<ImageInfo[]>([])

// 表单验证规则
const houseTypeFormRules: FormRules = {
  houseTypeName: [
    { required: true, message: '请输入户型名称', trigger: 'blur' },
    { min: 2, max: 100, message: '户型名称长度在 2 到 100 个字符', trigger: 'blur' }
  ],
  totalArea: [
    { required: true, message: '请输入建筑面积', trigger: 'blur' },
    { 
      validator: (rule, value, callback) => {
        if (value === null || value === undefined || value === '') {
          callback(new Error('请输入建筑面积'))
        } else if (typeof value === 'string') {
          const numValue = parseFloat(value)
          if (isNaN(numValue) || numValue <= 0) {
            callback(new Error('建筑面积必须大于0'))
          } else {
            callback()
          }
        } else if (typeof value === 'number') {
          if (value <= 0) {
            callback(new Error('建筑面积必须大于0'))
          } else {
            callback()
          }
        } else {
          callback(new Error('建筑面积格式不正确'))
        }
      }, 
      trigger: 'blur' 
    }
  ]
}

// 户型列表
const houseTypeList = ref<HouseType[]>([])

// 多公司户型数据
const multiCompanyHouseTypes = ref<Record<number, HouseType[]>>({})

// 选项数据
const orientationOptions = [
  { label: '南北通透', value: '南北通透' },
  { label: '朝南', value: '朝南' },
  { label: '朝北', value: '朝北' },
  { label: '朝东', value: '朝东' },
  { label: '朝西', value: '朝西' },
  { label: '东南', value: '东南' },
  { label: '西南', value: '西南' },
  { label: '东北', value: '东北' },
  { label: '西北', value: '西北' },
  { label: '东西向', value: '东西向' }
]

const floorPositionOptions = [
  { label: '底层', value: '底层' },
  { label: '顶层', value: '顶层' },
  { label: '中间层', value: '中间层' }
]

const balconyTypeOptions = [
  { label: '生活阳台', value: '生活阳台' },
  { label: '景观阳台', value: '景观阳台' },
  { label: '多功能阳台', value: '多功能阳台' }
]

const bayWindowTypeOptions = [
  { label: '全飘', value: '全飘' },
  { label: '半飘', value: '半飘' }
]

const suitableCrowdOptions = [
  { label: '刚需小户型', value: '刚需小户型' },
  { label: '改善型大户型', value: '改善型大户型' },
  { label: '学区房户型', value: '学区房户型' },
  { label: '投资型户型', value: '投资型户型' },
  { label: '养老型户型', value: '养老型户型' },
  { label: '度假型户型', value: '度假型户型' }
]

const commonAdvantageTags = [
  '全明户型',
  '南北通透',
  '主卧套间',
  '动静分离',
  '干湿分离',
  '方正户型',
  '赠送面积',
  '可改户型',
  '学区房户型',
  '刚需小户型',
  '改善型大户型',
  '投资型户型'
]

// 计算属性
const canAddHouseType = computed(() => {
  return selectedCompanies.value.length > 0
})

const isEditMode = computed(() => {
  return !!houseTypeForm.id
})

// 监听物业公司选择变化
watch(() => selectedCompanies.value, (newVal) => {
  if (newVal.length > 0) {
    // 修复：使用正确的物业公司ID而不是用户物业公司关联表的ID
    const propertyCompanyIds = newVal.map(companyId => {
      const company = propertyCompanies.value.find(c => c.id === companyId)
      return company ? company.propertyCompanyId : companyId
    })
    houseTypeForm.propertyCompanyIds = propertyCompanyIds
    loadHouseTypeList()
  } else {
    houseTypeList.value = []
  }
}, { deep: true })

// 方法定义
const loadPropertyCompanies = async () => {
  try {
    propertyCompaniesLoading.value = true
    const response = await houseTypeApi.getUserPropertyCompanies()
    if (response.code === 200) {
      propertyCompanies.value = response.data || []
      // 默认选中第一个公司
      if (propertyCompanies.value.length > 0) {
        selectedCompanies.value = [propertyCompanies.value[0].id]
      }
    }
  } catch (error) {
    console.error('加载物业公司列表失败:', error)
    ElMessage.error('加载物业公司列表失败')
  } finally {
    propertyCompaniesLoading.value = false
  }
}

const handleCompanySelectionChange = (companies: number[]) => {
  selectedCompanies.value = companies
  companySelectionForm.selectedCompanies = companies
}

const loadHouseTypeList = async () => {
  if (selectedCompanies.value.length === 0) return
  
  try {
    listLoading.value = true
    
    // 如果选中多个公司，加载所有选中公司的户型数据
    if (selectedCompanies.value.length > 1) {
      for (const companyId of selectedCompanies.value) {
        const selectedCompany = propertyCompanies.value.find(company => company.id === companyId)
        if (!selectedCompany) {
          console.warn(`未找到物业公司信息，ID: ${companyId}`)
          continue
        }
        
        const propertyCompanyId = selectedCompany.propertyCompanyId
        console.log(`加载物业公司户型数据，ID: ${propertyCompanyId}`)
        
        try {
          const response = await houseTypeApi.getHouseTypePage({
            propertyCompanyId: propertyCompanyId,
            current: 1,
            size: 1000
          })
          
          if (response.code === 200) {
            multiCompanyHouseTypes.value[companyId] = response.data.records || []
          } else {
            console.warn(`加载物业公司${selectedCompany.propertyCompanyName}户型失败: ${response.message}`)
            multiCompanyHouseTypes.value[companyId] = []
          }
        } catch (error) {
          console.error(`加载物业公司${selectedCompany.propertyCompanyName}户型失败:`, error)
          multiCompanyHouseTypes.value[companyId] = []
        }
      }
    }
    // 如果只选中一个公司，调用后端API获取户型列表
    else if (selectedCompanies.value.length === 1) {
      const companyId = selectedCompanies.value[0]
      
      // 获取选中公司的propertyCompanyId
      const selectedCompany = propertyCompanies.value.find(company => company.id === companyId)
      if (!selectedCompany) {
        ElMessage.error('未找到选中的物业公司信息')
        return
      }
      
      const propertyCompanyId = selectedCompany.propertyCompanyId
      console.log('使用物业公司ID:', propertyCompanyId)
      
      try {
        const response = await houseTypeApi.getHouseTypePage({
          propertyCompanyId: propertyCompanyId,
          current: 1,
          size: 1000
        })
        
        if (response.code === 200) {
          houseTypeList.value = response.data.records || []
          
          // 同时更新模拟数据，保持多公司模式的一致性
          multiCompanyHouseTypes.value[companyId] = response.data.records || []
        } else {
          ElMessage.error(response.message || '加载户型列表失败')
          houseTypeList.value = []
        }
      } catch (error) {
        console.error('加载户型列表失败:', error)
        ElMessage.error('加载户型列表失败')
        houseTypeList.value = []
      }
    }
  } catch (error) {
    console.error('加载户型列表失败:', error)
    ElMessage.error('加载户型列表失败')
  } finally {
    listLoading.value = false
  }
}

const handleAddHouseType = () => {
  resetHouseTypeForm()
  // 确保清空ID字段，表示新增模式
  houseTypeForm.id = undefined
}

const handleSubmitHouseType = async () => {
  if (!houseTypeFormRef.value) return
  
  try {
    await houseTypeFormRef.value.validate()
    submitLoading.value = true
    
    // 数据预处理：确保数字字段类型正确
    const submitData = {
      ...houseTypeForm,
      // 确保totalArea为数字类型，避免数组或字符串类型
      totalArea: typeof houseTypeForm.totalArea === 'string' ? 
        parseFloat(houseTypeForm.totalArea) || 0 : 
        (Array.isArray(houseTypeForm.totalArea) ? 0 : (houseTypeForm.totalArea || 0)),
      usableArea: typeof houseTypeForm.usableArea === 'string' ? 
        parseFloat(houseTypeForm.usableArea) || undefined : 
        (Array.isArray(houseTypeForm.usableArea) ? undefined : houseTypeForm.usableArea),
      publicArea: typeof houseTypeForm.publicArea === 'string' ? 
        parseFloat(houseTypeForm.publicArea) || undefined : 
        (Array.isArray(houseTypeForm.publicArea) ? undefined : houseTypeForm.publicArea),
      floorHeight: typeof houseTypeForm.floorHeight === 'string' ? 
        parseFloat(houseTypeForm.floorHeight) || undefined : 
        (Array.isArray(houseTypeForm.floorHeight) ? undefined : houseTypeForm.floorHeight),
      netHeight: typeof houseTypeForm.netHeight === 'string' ? 
        parseFloat(houseTypeForm.netHeight) || undefined : 
        (Array.isArray(houseTypeForm.netHeight) ? undefined : houseTypeForm.netHeight)
    }
    
    // 处理户型图URL数据
    if (floorPlanFiles.value && floorPlanFiles.value.length > 0) {
      const floorPlanUrls = floorPlanFiles.value
        .map(file => {
          // 处理不同文件对象格式
          if (file.url) {
            return file.url
          } else if (file.response && file.response.data && file.response.data.url) {
            return file.response.data.url
          } else if (file.response && file.response.data && file.response.data.fileUrl) {
            return file.response.data.fileUrl
          }
          return null
        })
        .filter(url => url && typeof url === 'string')
      
      if (floorPlanUrls.length > 0) {
        submitData.floorPlanUrl = JSON.stringify(floorPlanUrls)
      } else {
        submitData.floorPlanUrl = ''
      }
    } else {
      submitData.floorPlanUrl = ''
    }
    
    // 添加调试日志，确保物业公司ID正确
    console.log('提交户型，物业公司ID列表:', submitData.propertyCompanyIds)
    console.log('户型表单数据:', submitData)
    console.log('户型图URL字段:', submitData.floorPlanUrl)
    console.log('户型图文件列表:', floorPlanFiles.value)
    
    let response
    if (submitData.id) {
      // 更新户型
      response = await houseTypeApi.updateHouseType(submitData.id, submitData)
      if (response.code === 200) {
        ElMessage.success('户型更新成功')
      }
    } else {
      // 创建户型
      response = await houseTypeApi.createHouseType(submitData)
      if (response.code === 200) {
        ElMessage.success('户型创建成功')
      }
    }
    
    if (response.code === 200) {
      resetHouseTypeForm()
      loadHouseTypeList()
    }
  } catch (error) {
    console.error('保存户型失败:', error)
    ElMessage.error('保存户型失败')
  } finally {
    submitLoading.value = false
  }
}

const resetHouseTypeForm = () => {
  if (houseTypeFormRef.value) {
    houseTypeFormRef.value.resetFields()
  }
  
  // 重置户型图文件列表
  floorPlanFiles.value = []
  
  // 修复：使用正确的物业公司ID而不是用户物业公司关联表的ID
  const propertyCompanyIds = selectedCompanies.value.map(companyId => {
    const company = propertyCompanies.value.find(c => c.id === companyId)
    return company ? company.propertyCompanyId : companyId
  })
  
  Object.assign(houseTypeForm, {
    id: undefined,
    propertyCompanyIds: propertyCompanyIds,
    houseTypeName: '',
    totalArea: 0,
    usableArea: undefined,
    publicArea: undefined,
    bedroomCount: 0,
    masterBedroomCount: 0,
    secondaryBedroomCount: 0,
    childrenRoomCount: 0,
    livingRoomCount: 1,
    diningRoomCount: 0,
    kitchenCount: 1,
    bathroomCount: 1,
    masterBathroomCount: 0,
    publicBathroomCount: 1,
    guestBathroomCount: 0,
    studyRoomCount: 0,
    storageRoomCount: 0,
    cloakroomCount: 0,
    entranceGardenCount: 0,
    orientation: undefined,
    masterBedroomOrientation: undefined,
    livingRoomOrientation: undefined,
    floorPosition: undefined,
    hasGarden: false,
    hasTerrace: false,
    hasAttic: false,
    isSquare: true,
    hasIrregularSpace: false,
    isTransparent: false,
    isAllBright: false,
    hasDynamicStaticSeparation: false,
    hasWetDrySeparation: false,
    balconyCount: 0,
    balconyType: undefined,
    balconyStyle: undefined,
    bayWindowCount: 0,
    bayWindowType: undefined,
    kitchenHasBalcony: false,
    bathroomHasBathtub: false,
    bathroomHasSeparation: false,
    bathroomHasWindow: true,
    floorHeight: undefined,
    netHeight: undefined,
    hasLoft: false,
    hasDuplex: false,
    canModify: false,
    hasGiftArea: false,
    giftAreaDesc: '',
    floorPlanType: undefined,
    floorPlanStatus: undefined,
    floorPlanUrl: '',
    advantageTags: [],
    suitableCrowd: undefined,
    remark: '',
    status: 1
  })
}

const handleRefreshHouseTypeList = () => {
  loadHouseTypeList()
}

const handleResetHouseTypeForm = () => {
  resetHouseTypeForm()
}

// 处理户型图上传变化（响应ImageUpload的v-model更新）
const handleFloorPlanChange = (file: any, fileList: ImageInfo[]) => {
  console.log('=== 户型图文件列表变化 ===')
  console.log('触发文件:', file)
  console.log('新的文件列表:', fileList)
  console.log('文件列表长度:', fileList?.length || 0)
  
  try {
    // 确保fileList是数组，避免undefined错误
    const safeFileList = Array.isArray(fileList) ? fileList : []
    
    // 重要：这里不需要手动更新floorPlanFiles.value
    // 因为v-model已经通过@update:modelValue自动同步了
    console.log('当前floorPlanFiles.value:', floorPlanFiles.value)
    console.log('传入的fileList:', safeFileList)
    
    // 提取户型图URL列表 - ImageUpload组件使用标准格式
    const floorPlanUrls = safeFileList
      .map(fileItem => fileItem.url || fileItem.fileUrl)
      .filter(url => url && typeof url === 'string')
    
    // 更新表单中的户型图URL字段（使用JSON格式存储）
    if (floorPlanUrls.length > 0) {
      houseTypeForm.floorPlanUrl = JSON.stringify(floorPlanUrls)
    } else {
      houseTypeForm.floorPlanUrl = ''
    }
    
    console.log('提取的URL列表:', floorPlanUrls)
    console.log('更新后的表单字段:', houseTypeForm.floorPlanUrl)
    console.log('=== 户型图文件列表变化处理完成 ===')
  } catch (error) {
    console.error('处理户型图上传变化失败:', error)
  }
}

// 处理户型图文件移除
const handleFloorPlanRemove = (file: ImageInfo, fileList: ImageInfo[]) => {
  console.log('户型图文件移除:', file, fileList)
  
  try {
    // 确保fileList是数组，避免undefined错误
    const safeFileList = Array.isArray(fileList) ? fileList : []
    
    // 同步更新floorPlanFiles变量
    floorPlanFiles.value = safeFileList
    
    // 提取户型图URL列表 - ImageUpload组件使用标准格式
    const floorPlanUrls = safeFileList
      .map(fileItem => fileItem.url || fileItem.fileUrl)
      .filter(url => url && typeof url === 'string')
    
    // 更新表单中的户型图URL字段（使用JSON格式存储）
    if (floorPlanUrls.length > 0) {
      houseTypeForm.floorPlanUrl = JSON.stringify(floorPlanUrls)
    } else {
      houseTypeForm.floorPlanUrl = ''
    }
    
    console.log('移除后户型图URL列表:', floorPlanUrls)
    console.log('移除后户型图URL字段值:', houseTypeForm.floorPlanUrl)
    console.log('移除后户型图文件列表:', floorPlanFiles.value)
    
    // 显示成功消息
    if (safeFileList.length === 0) {
      ElMessage.success('已清空所有户型图')
    } else {
      ElMessage.success(`户型图删除成功，还剩 ${safeFileList.length} 张`)
    }
  } catch (error) {
    console.error('处理户型图删除失败:', error)
    ElMessage.error('删除户型图时发生错误，请重试')
  }
}



// 处理户型图URL显示（用于编辑时显示已保存的户型图）
const handleFloorPlanUrlDisplay = (floorPlanUrl: string): ImageInfo[] => {
  if (!floorPlanUrl || typeof floorPlanUrl !== 'string') {
    return []
  }
  
  try {
    const urls = JSON.parse(floorPlanUrl)
    if (Array.isArray(urls)) {
      return urls.map((url, index) => ({
        uid: `existing-${index}`,
        id: `existing-${index}`,
        url: url,
        fileUrl: url,
        name: url.split('/').pop() || `户型图${index + 1}`,
        fileName: url.split('/').pop() || `户型图${index + 1}`,
        fileSize: 0
      }))
    }
  } catch (error) {
    console.warn('解析户型图URL失败:', error)
    // 如果不是JSON格式，可能是单个URL
    if (floorPlanUrl) {
      return [{
        uid: 'existing-0',
        id: 'existing-0',
        url: floorPlanUrl,
        fileUrl: floorPlanUrl,
        name: floorPlanUrl.split('/').pop() || '户型图',
        fileName: floorPlanUrl.split('/').pop() || '户型图',
        fileSize: 0
      }]
    }
  }
  
  return []
}



// 获取物业公司名称
const getCompanyName = (companyId: number) => {
  const company = propertyCompanies.value.find(c => c.id === companyId)
  return company ? company.propertyCompanyName : `物业公司${companyId}`
}

// 获取指定公司的户型列表
const getCompanyHouseTypes = (companyId: number) => {
  return multiCompanyHouseTypes.value[companyId] || []
}

// 处理编辑户型（支持多公司）
const handleEditHouseType = (row: HouseType, companyId?: number) => {
  try {
    // 填充表单数据 - 确保数字字段类型正确
    Object.assign(houseTypeForm, {
      id: row.id,
      propertyCompanyIds: [row.propertyCompanyId],
      houseTypeName: row.houseTypeName,
      // 确保数字字段为number类型，避免字符串类型导致ElInputNumber报错
      totalArea: typeof row.totalArea === 'string' ? parseFloat(row.totalArea) || 0 : (row.totalArea || 0),
      usableArea: typeof row.usableArea === 'string' ? parseFloat(row.usableArea) || undefined : row.usableArea,
      publicArea: typeof row.publicArea === 'string' ? parseFloat(row.publicArea) || undefined : row.publicArea,
      efficiencyRate: typeof row.efficiencyRate === 'string' ? parseFloat(row.efficiencyRate) || undefined : row.efficiencyRate,
      bedroomCount: row.bedroomCount || 0,
      masterBedroomCount: row.masterBedroomCount || 0,
      secondaryBedroomCount: row.secondaryBedroomCount || 0,
      childrenRoomCount: row.childrenRoomCount || 0,
      livingRoomCount: row.livingRoomCount || 1,
      diningRoomCount: row.diningRoomCount || 0,
      kitchenCount: row.kitchenCount || 1,
      bathroomCount: row.bathroomCount || 1,
      masterBathroomCount: row.masterBathroomCount || 0,
      publicBathroomCount: row.publicBathroomCount || 1,
      guestBathroomCount: row.guestBathroomCount || 0,
      studyRoomCount: row.studyRoomCount || 0,
      storageRoomCount: row.storageRoomCount || 0,
      cloakroomCount: row.cloakroomCount || 0,
      entranceGardenCount: row.entranceGardenCount || 0,
      orientation: row.orientation,
      masterBedroomOrientation: row.masterBedroomOrientation,
      livingRoomOrientation: row.livingRoomOrientation,
      floorPosition: row.floorPosition,
      hasGarden: row.hasGarden || false,
      hasTerrace: row.hasTerrace || false,
      hasAttic: row.hasAttic || false,
      isSquare: row.isSquare !== undefined ? row.isSquare : true,
      hasIrregularSpace: row.hasIrregularSpace || false,
      isTransparent: row.isTransparent || false,
      isAllBright: row.isAllBright || false,
      hasDynamicStaticSeparation: row.hasDynamicStaticSeparation || false,
      hasWetDrySeparation: row.hasWetDrySeparation || false,
      balconyCount: row.balconyCount || 0,
      balconyType: row.balconyType,
      balconyStyle: row.balconyStyle,
      bayWindowCount: row.bayWindowCount || 0,
      bayWindowType: row.bayWindowType,
      kitchenHasBalcony: row.kitchenHasBalcony || false,
      bathroomHasBathtub: row.bathroomHasBathtub || false,
      bathroomHasSeparation: row.bathroomHasSeparation || false,
      bathroomHasWindow: row.bathroomHasWindow !== undefined ? row.bathroomHasWindow : true,
      floorHeight: typeof row.floorHeight === 'string' ? parseFloat(row.floorHeight) || undefined : row.floorHeight,
      netHeight: typeof row.netHeight === 'string' ? parseFloat(row.netHeight) || undefined : row.netHeight,
      hasLoft: row.hasLoft || false,
      hasDuplex: row.hasDuplex || false,
      canModify: row.canModify || false,
      hasGiftArea: row.hasGiftArea || false,
      giftAreaDesc: row.giftAreaDesc || '',
      floorPlanType: row.floorPlanType,
      floorPlanStatus: row.floorPlanStatus,
      floorPlanUrl: row.floorPlanUrl || '',
      advantageTags: row.advantageTags || [],
      suitableCrowd: row.suitableCrowd,
      remark: row.remark || '',
      status: row.status || 1
    })
    
    // 处理户型图显示
    if (row.floorPlanUrl) {
      floorPlanFiles.value = handleFloorPlanUrlDisplay(row.floorPlanUrl)
    } else {
      floorPlanFiles.value = []
    }
    
    // 清除表单验证状态，避免显示旧的验证信息
    nextTick(() => {
      if (houseTypeFormRef.value) {
        houseTypeFormRef.value.clearValidate()
      }
    })
    
    ElMessage.success('户型数据已加载到表单中，请修改后保存')
  } catch (error) {
    console.error('加载户型数据失败:', error)
    ElMessage.error('加载户型数据失败')
  }
}

// 处理删除户型（支持多公司）
const handleDeleteHouseType = async (row: HouseType, companyId?: number) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除户型"${row.houseTypeName}"吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const response = await houseTypeApi.deleteHouseType(row.id!)
    if (response.code === 200) {
      ElMessage.success('删除成功')
      loadHouseTypeList()
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除户型失败:', error)
      ElMessage.error('删除户型失败')
    }
  }
}

// 处理户型图上传成功
const handleFloorPlanSuccess = (response: any, file: any, fileList: ImageInfo[]) => {
  console.log('=== 户型图上传成功处理开始 ===')
  console.log('响应数据:', response)
  console.log('文件对象:', file)
  console.log('文件列表:', fileList)
  console.log('当前floorPlanFiles:', floorPlanFiles.value)
  
  try {
    // ImageUpload组件已经处理了图片添加和update:modelValue事件
    // 这里只需要处理业务逻辑，不要重复操作图片列表
    
    console.log('ImageUpload组件已更新图片列表，当前数量:', fileList.length)
    console.log('=== 户型图上传成功处理完成 ===')
    
    // 显示成功消息（ImageUpload组件也会显示，但我们可以显示更具体的信息）
    ElMessage.success(`户型图上传成功，当前共 ${fileList.length} 张图片`)
  } catch (error) {
    console.error('处理户型图上传成功失败:', error)
    ElMessage.error('处理上传成功信息失败')
  }
}

// 处理户型图上传错误
const handleFloorPlanError = (error: Error, file: any, fileList: ImageInfo[]) => {
  console.error('户型图上传失败:', error, file, fileList)
  ElMessage.error('户型图上传失败，请重试')
}

// 生命周期
onMounted(() => {
  loadPropertyCompanies()
})
</script>

<style scoped>
.house-type-config {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 8px 0;
}

.page-desc {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

.company-selection-card,
.house-type-form-card,
.house-type-list-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.company-selection-content {
  padding: 20px 0;
}

.company-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.company-name {
  font-weight: 500;
}

.company-code {
  color: #909399;
  font-size: 12px;
}

.company-role {
  color: #409eff;
  font-size: 12px;
}

.form-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #909399;
  font-size: 14px;
}

.selection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.company-checkbox {
  margin-right: 16px;
  margin-bottom: 8px;
}

.list-section {
  margin-top: 20px;
}

.multi-company-section {
  .company-house-section {
    margin-bottom: 24px;
    
    .company-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
      
      h4 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #303133;
      }
    }
  }
}

.single-company-section {
  margin-top: 16px;
}

.form-tip .el-icon {
  margin-right: 4px;
}

.house-type-form {
  padding: 20px 0;
}

.compact-form {
  .el-form-item {
    margin-bottom: 16px;
  }
  
  .el-divider {
    margin: 20px 0 16px 0;
  }
  
  .el-row {
    margin-bottom: 8px;
  }
}

.upload-tip {
  display: flex;
  align-items: center;
  margin-top: 8px;
  color: #909399;
  font-size: 12px;
  
  .el-icon {
    margin-right: 4px;
  }
}

.unit-text {
  margin-left: 8px;
  color: #909399;
  font-size: 12px;
}

.header-actions {
  display: flex;
  gap: 10px;
}
</style>
